---
title: 前端全局换肤
date: 2022-07-13 20:10:43
images: ['https://cms.pixso.cn/images/designskills/2023/2023-Q4/popular-front-end-ui-framework02.png']
summary: '前端给网站换肤，主要是替换全局的颜色，使用的是CSS变量，在全局样式中定义，然后在需要使用的地方使用。'
tags: 
 - web
---


## 全局肤色替换
![](https://kodo.huixiangwuyou.com/blog/images/web/20250117164750.png)
将后台配置的颜色 覆盖到全局HTML上
![](https://kodo.huixiangwuyou.com/blog/images/web/20250117164803.png)
```javascript
formatConfig =  this.processSkinConfig(themeConfig)
this.setDomStyle(formatConfig)

/**
 * @desc: 处理全局皮肤配置的方法
 * @argument themeConfig  原始配置数据
*/
processSkinConfig = function (themeConfig) {
 // 数据结构处理
 let allKey = {};
 Object.keys(themeConfig).forEach(keyItem => {
   let ret = themeConfig[keyItem];
   typeof ret === 'string' && (ret = [ret]);
   allKey[`--${kebabCase(keyItem)}`] = ret[0];
   ret[1] && (allKey[`--rgb-${kebabCase(keyItem)}`] = ret[1]);
 })
}

// 更改全局样式
setDomStyle = (allKey)=>{
 Object.keys(allKey).forEach(el => {
  document.documentElement.style.setProperty(el, allKey[el]);
 })
}

```